<mat-card class="keyresult-card">
  <div class="flex-nowrap">

    <!-- Drag handle by parent component contained here -->
    <ng-content></ng-content>

    <div class="icon-spacer keyresult-title changePositonListNumber">{{ listNumber }} .</div>

    <div class="customFlex-1">

      <div class="flex-wrap">
        <div class="customFlex-2">
          <div class="keyresult-title">
            {{ keyResult.keyResult }}
          </div>
          <div class="keyresult-description">
            {{keyResult.description}}
          </div>
        </div>
        <div class="flex-nowrap keyresult-slider">
          <div class="f-5">
            <app-milestone-slider-wrapper [keyResult]="keyResult">
              <mat-slider *ngIf="isKeyResultSliderInverted; else invertedKeyResultSlider" thumbLabel min="{{ keyResult.start }}" [disabled]="!(currentUserRole.isAtleastOKRMember() && !cycle.isCycleClosed())" value="{{ keyResult.current }}" max="{{ keyResult.end }}" (change)="onKeyResultSliderDropped($event)" [matTooltipDisabled]="!currentUserRole.isAdmin" [matTooltipShowDelay]="500" class="fullWidth" matTooltip="{{ 'keyresult.tooltip.adjust-progress' | translate }}">
              </mat-slider>
              <ng-template #invertedKeyResultSlider>
                <mat-slider thumbLabel max="{{ keyResult.start }}" [invert]="true" [disabled]="!(currentUserRole.isAtleastOKRMember() && !cycle.isCycleClosed())" value="{{ keyResult.current }}" min="{{ keyResult.end }}" (change)="onKeyResultSliderDropped($event)" [matTooltipDisabled]="!currentUserRole.isAdmin" [matTooltipShowDelay]="500" class="fullWidth" matTooltip="{{ 'keyresult.tooltip.adjust-progress' | translate }}">
                </mat-slider>
              </ng-template>
            </app-milestone-slider-wrapper>
          </div>
          <div class="keyresult-progress-text f-1">
            {{getKeyResultProgressText()}}
          </div>
        </div>
      </div>
    </div>

    <button *ngIf="currentUserRole.isAtleastOKRMember() && !cycle.isCycleClosed()" [matMenuTriggerFor]="optionsMenu" [matMenuTriggerData]="{ keyResult: keyResult }" class="icon-spacer changePosition" mat-icon-button>
      <mat-icon matTooltip="{{ 'keyresult.tooltip.more-options' | translate }}">
        more_vert
      </mat-icon>
    </button>

    <button class="icon-spacer changePosition" mat-icon-button (click)="clickedOpenComments()">
      <mat-icon [matBadge]="getKeyResultCommentCount()" matTooltip="{{ 'keyresult.tooltip.comments-for-this-key-result' | translate }}">chat
      </mat-icon>
    </button>

  </div>
</mat-card>

<!-- Options menu -->
<mat-menu #optionsMenu="matMenu" xPosition="before">
  <ng-template matMenuContent let-keyResult="keyResult">
    <button mat-menu-item (click)="clickedEditKeyResult()">
      <mat-icon>edit</mat-icon>
      <span>{{ 'keyresult.menu.edit-key-result' | translate }}</span>
    </button>
    <button mat-menu-item *ngIf="!isKeyResultOnTop()" (click)="clickedMoveKeyResultToTop()">
      <mat-icon>vertical_align_top</mat-icon>
      <span>{{ 'keyresult.menu.move-key-result-up' | translate }}</span>
    </button>
    <button mat-menu-item *ngIf="!isKeyResultOnBottom()" (click)="clickedMoveKeyResultToBottom()">
      <mat-icon>vertical_align_bottom</mat-icon>
      <span>{{ 'keyresult.menu.move-key-result-down' | translate }}</span>
    </button>
    <button mat-menu-item *ngIf="currentUserRole.isAtleastOKRManager()" (click)="clickedDeleteKeyResult()">
      <mat-icon>delete</mat-icon>
      <span>{{ 'keyresult.menu.keyresult' | translate }}</span>
    </button>
  </ng-template>
</mat-menu>
